<template>
	<div>
		<el-table :data="list" style="width: 100%">
			<el-table-column prop="title" label="标题" />
			<el-table-column prop="type" label="类型" />
			<el-table-column label="类型">
				<template #default="scope">
					<img :src="scope.row.url" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="auther" label="作者" />
			<el-table-column prop="email" label="邮箱" />
			<el-table-column prop="createTime" label="创建日期" width="180" />
			<el-table-column label="是否置顶">
				<template #default="scope">
					<el-button @click="changeStateTop(scope.row.id)" v-if="scope.row.isTop" type="primary">已置顶</el-button>
					<el-button @click="changeStateTop(scope.row.id)" v-else type="default">未置顶</el-button>
				</template>
			</el-table-column>
			<el-table-column label="是否推荐">
				<template #default="scope">
					<el-button @click="changeStateCommon(scope.row.id)" v-if="scope.row.isCommon" type="primary">已推荐</el-button>
					<el-button @click="changeStateCommon(scope.row.id)" v-else type="default">未推荐</el-button>
				</template>
			</el-table-column>
			<el-table-column label="是否使用">
				<template #default="scope">
					<el-button @click="changeStateUse(scope.row.id)" v-if="scope.row.isUse" type="primary">已使用</el-button>
					<el-button @click="changeStateUse(scope.row.id)" v-else type="default">未使用</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const list = ref([])
const changeStateTop = async (id: string) => {
	const resp = await axios.post('/api/list/state/top', { id });
	ElMessage({ type: 'success', message: resp.data.message })
	fetchList()

}

const changeStateCommon = async (id: string) => {
	const resp = await axios.post('/api/list/state/common', { id });
	ElMessage({ type: 'success', message: resp.data.message })
	fetchList()
}

const changeStateUse = async (id: string) => {
	const resp = await axios.post('/api/list/state/use', { id });
	ElMessage({ type: 'success', message: resp.data.message })
	fetchList()

}

const fetchList = async () => {
	const resp = await axios.get('/api/list');
	list.value = resp.data.data
}

onMounted(() => {
	fetchList()
})

</script>


<style scope>
img {
	height: 50px
}
</style>